<template>
  <div class="file">
    <div class="bar">
      <van-nav-bar @click-left="onClickLeft">
        <template #left>
          <van-icon name="arrow-left" size="25" color="#aaa"></van-icon>
        </template>
        <template #right>
          <van-icon
            @click="showPopup"
            name="warning-o"
            size="25"
            color="#aaa"
          ></van-icon>
        </template>
      </van-nav-bar>
    </div>
    <div class="cont">
      <div class="uploader">
        <van-uploader
          v-model="fileList"
          multiple
          preview-size="107"
          :max-count="6"
          :before-delete="del"
        >
          <div class="add">
            <van-icon name="plus" size="25" color="#aaa"></van-icon>
          </div>
        </van-uploader>
      </div>
      <div class="from">
        <p>
          <input
            class="title"
            :value="title"
            @keyup="titleValue"
            type="text"
            placeholder="填写标题会有跟多赞哦"
          />
        </p>
        <p>
          <textarea
            class="text"
            :value="content"
            @keyup="contentValue"
            cols="30"
            rows="6"
          ></textarea>
        </p>
      </div>
      <div class="btn">
        <van-button
          @click="submit"
          text="发布笔记"
          color="red"
          round
          size="large"
        ></van-button>
      </div>
      <!-- 提示框 -->
      <van-popup
        v-model:show="show"
        round
        :close-on-click-overlay="false"
        closeable
      >
        <div class="popup">
          <h6>发布小贴士</h6>
          <p>
            小红鼓励向上、真实的、原创得内容，小红书鼓励向上、真实、原创的内容，含以下内容不会被推荐:
          </p>
          <p>1.含有不文明语言、过度性感图片;</p>
          <p>2.含有网址链接、联系方式、二维码或售卖语</p>
        </div>
      </van-popup>
    </div>
  </div>
</template>

<script>
import { Uploader, NavBar, Popup, Button, Toast } from "vant";
import { inject, ref } from "vue";
import {uploader} from "@/api/file"
import  Store from "@/store";
import {useRouter} from "vue-router"
export default {
  name: "File",
  components: {
    [Uploader.name]: Uploader,
    [NavBar.name]: NavBar,
    [Popup.name]: Popup,
    [Button.name]: Button,
  },

  setup() {
    const log = Toast;
    const axios = inject("$http")
    let router = useRouter()
    // 信息提示面板
    let show = ref(false);
    // 提示框
    function showPopup() {
      show.value = !show.value;
    }
    // 文件默认数组
    let fileList = ref([]);
    function del(file) {
      if (fileList.value instanceof Array) {
        fileList.value = fileList.value.filter(
          (v) => v.file.name != file.file.name
        );
      } else {
        log("????");
      }
    }
    // 标题 内容
    let title = ref("");
    function titleValue(e) {
      title.value = e.target.value;
    }
    let content = ref("");
    function contentValue(e) {
      content.value = e.target.value;
    }

    // 模拟表单对象
    function formData(title,content,fileList){
      let formData = new FormData()
      formData.append("title",title)
      formData.append("content",content)
      formData.append("id",Store.state.user.id)
      for(let i=0;i<fileList.length;i++){
        formData.append("img",fileList[i].file)
      }
      /* for (let value of formData.values()){
        // console.log(value);
      } */
      return formData
      
    }
    // 发布笔记
    function submit() {
      // 判断是否上传图片和标题、内容
      if (title.value && content.value && fileList.value.length!=0) {
        let data = formData(title.value,content.value,fileList.value)
        uploader(axios,data)
        title.value = ""
        content.value = ""
        fileList.value = []
        router.push("/")
      } else {
        log("请填写信息");
      }
    }

    return {
      show,
      showPopup,
      fileList,
      del,
      title,
      titleValue,
      content,
      contentValue,
      submit,
    };
  },
  methods: {
    // 返回路由
    onClickLeft() {
      history.back();
    },
  },
};
</script>

<style scoped lang="scss">
.file {
  width: 100vw;
  height: 90vh;
  .cont {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 3% 4%;
    .uploader {
      width: 100%;
      .add {
        width: 104px;
        height: 104px;
        background: #eee;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
    // 表单
    .from {
      width: 100%;
      .title {
        font-size: 20px;
        width: 100%;
        padding: 1%;
        border: none;
        border-bottom: 1px solid #eee;
      }
      .text {
        width: 100%;
        padding: 2%;
        font-size: 18px;
        border: none;
        border-bottom: 1px solid #eee;
      }
    }
    // 提示框
    .popup {
      width: 90vw;
      padding: 10%;
      h6 {
        padding-bottom: 5%;
        text-align: center;
      }
    }
  }
}
</style>